<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/4/29
  Time: 13:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>

    <script src="http://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="./js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/a.css">

</head>
<body>
<div class="container">
    <div class="form row">
        <h2 class="text-center" style="color: #ad98bd;" >Register System</h2>
        <div class="row">
            <form class="form-horizontal col-md-offset-2 col-md-8" id="myform" >
                <div class="form-group">
                    <i class="fa fa-user-o fa-lg"></i>
                    <div class="form-group">
                         <input type="text" class="form-control" id="user" name="username" placeholder="账户名">
                    </div>
                </div>
                <div class="form-group">
                    <i class="fa fa-user-o fa-lg"></i>
                    <div class="form-group">
                        <input type="number" class="form-control" id="sno" name="stunumber" placeholder="工号">
                    </div>
                </div>
                <div class="form-group">
                    <i class="fa fa-user-secret fa-lg"></i>
                    <div class="form-group">
                        <input type="password" class="form-control" id="Password" name="pa" placeholder="密码">
                    </div>
                </div>
                <div class="form-group">
                    <i class="fa fa-user-secret fa-lg"></i>
                    <div class="form-group">
                        <input type="password" class="form-control" id="register_password" placeholder="确认密码">
                    </div>
                </div>
                <p id="msg_pwd" style="margin-left: 10px"></p>
                <div class="form-group">
                    <i class="fa fa-envelope fa-lg"></i>
                    <div class="form-group">
                        <input type="Email" class="form-control" id="Email" name="email"placeholder="邮箱">
                    </div>
                </div>
                <div class="form-group " style="position: relative;top:10px">
                    <div class="col-md-10">
                        <button style="float:left; position: relative;left:-15px" type="button" class="btn btn-default login col-md-6"   onclick="javascript:history.back(-1);">返回</button>
                        <button style="float:right; position: relative;left:60px" type="submit" id="btn_register" class="btn btn-default login col-md-6">注册</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

<script src="./dist/js/bootstrapValidator.min.js"></script>
<link href="./dist/css/bootstrapValidator.min.css" rel="stylesheet" />

<script type="text/javascript">
    $(document).ready(function(){
        $('#Password').on('input propertychange', function() {
            //input propertychange即实时监控键盘输入包括粘贴
            var pwd = $.trim($(this).val());
            //获取this，即ipwd的val()值，trim函数的作用是去除空格
            var rpwd = $.trim($("#register_password").val());
            if(rpwd!=""){
                if(pwd==""&&rpwd==""){
                    $("#msg_pwd").html("<font color='red'>密码不能为空</font>");
                }
                else{
                    if(pwd==rpwd){                                 //相同则提示密码匹配
                        $("#msg_pwd").html("<font color='green'>两次密码匹配通过</font>");
                        $("#btn_register").attr("disabled",false); //使按钮无法点击
                    }else{                                          //不相同则提示密码匹配
                        $("#msg_pwd").html("<font color='red'>两次密码不匹配</font>");
                        $("#btn_register").attr("disabled",true);
                    }
                }}
        })
    })

    //由于是两个输入框，所以进行两个输入框的几乎相同的判断
    $(document).ready(function(){
        $('#register_password').on('input propertychange', function() {
            var pwd = $.trim($(this).val());
            var rpwd = $.trim($("#Password").val());
            if(pwd==""&&rpwd==""){
                $("#msg_pwd").html("<font color='red'>密码不能为空</font>");
            }
            else{
                if(pwd==rpwd){
                    $("#msg_pwd").html("<font color='green'>两次密码匹配通过</font>");
                    $("#btn_register").attr("disabled",false);
                }else{
                    $("#msg_pwd").html("<font color='red'>两次密码不匹配</font>");
                    $("#btn_register").attr("disabled",true);
                }
            }
        })
    })

    $(function () {
        $('#myform').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户名不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户名长度必须在6到18位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户名只能包含大写、小写、数字和下划线'
                        }
                    }
                },
                password1: {
                    validators: {
                        notEmpty: {
                            message: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码长度必须在6到18位之间'
                        },
                    }
                },
                stunumber:{
                    validators: {
                        notEmpty: {
                            message: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;工号不能为空'
                        },
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;邮箱地址不能为空'
                        }
                    },
                    emailAddress: {
                        message: '邮箱地址格式有误'
                    }
                },
                pa: {
                    validators: {
                        notEmpty: {
                            message: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码不能为空'
                        }
                    },
                    stringLength: {
                        min: 6,
                        max: 18,
                        message: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码长度必须在6到18位之间'
                    }
                }
            }
        });
    });
</script>
